<template>
  <view class="container">
    <!-- 医院图片 -->
    <view class="hospital-image-container">
      <image class="hospital-image" :src="config.staticUrl + hospital.imgUrl" mode="aspectFill"></image>
    </view>

    <!-- 医院基本信息 -->
    <view class="hospital-info-card">
      <view class="hospital-name">{{ hospital.name }}</view>
      
      <view class="info-row">
        <text class="iconfont icon-dianhua"></text>
        <text class="label">{{ hospital.telephone }}</text>
      </view>
      
      <view class="info-row">
        <text class="iconfont icon-dingwei"></text>
        <text class="label">{{ hospital.address }}</text>
      </view>
    </view>

    <!-- 医院简介 -->
    <view class="section">
      <view class="section-title">医院简介</view>
      <view class="intro-text">
        {{ hospital.snapshot || '暂无医院介绍' }}
      </view>
    </view>

    <!-- 医院统计信息 -->
    <view class="section">
      <view class="section-title">医院概况</view>
      <view class="stats">
        <view class="stat-item">
          <text class="stat-label">建院时间</text>
          <text class="stat-value">{{ hospital.yearOfEstablishment || '未知' }}年</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">医院等级</text>
          <text class="stat-value">{{ hospital.hospitalGrade || '未知' }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">年门诊量</text>
          <text class="stat-value">{{ hospital.annualOutpatientVolume || '未知' }}</text>
        </view>
      </view>
    </view>

    <!-- 导航按钮 -->
    <view class="navigation-section">
      <button class="navigation-button" @tap="showNavigationModal">
        <text class="iconfont icon-daohang"></text>
        <text class="button-text">导航到医院</text>
      </button>
    </view>

    <!-- 导航模态框 -->
    <uni-popup ref="navigationPopup" type="bottom">
      <view class="nav-modal">
        <view class="nav-header">
          <text class="location-text">{{ hospital.address }}</text>
        </view>
        <view class="nav-options">
          <view class="nav-option" @tap="navigate('drive')">
            <text class="icon">🚗</text>
            <text>驾车</text>
          </view>
          <view class="nav-option" @tap="navigate('transit')">
            <text class="icon">🚌</text>
            <text>公交</text>
          </view>
          <view class="nav-option" @tap="navigate('walk')">
            <text class="icon">🚶</text>
            <text>步行</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getHospital } from '@/api/hospital'
import config from '@/config'

export default {
  data() {
    return {
      hospital: {},
      config: config,
      loading: true
    }
  },
  onLoad(options) {
    this.loadHospitalData(options.id)
  },
  methods: {
    async loadHospitalData(id) {
      this.loading = true
      try {
        const res = await getHospital(id)
        if (res.code === 200) {
          this.hospital = res.data
        } else {
          uni.showToast({
            title: res.msg || '获取医院信息失败',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      } catch (error) {
        console.error('获取医院信息失败:', error)
        uni.showToast({
          title: '获取医院信息失败',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } finally {
        this.loading = false
      }
    },
    
    showNavigationModal() {
      this.$refs.navigationPopup.open()
    },
    
    navigate(type) {
      if (!this.hospital.lat || !this.hospital.lng) {
        uni.showToast({
          title: '该医院缺少位置信息',
          icon: 'none'
        })
        return
      }
      
      const location = {
        latitude: parseFloat(this.hospital.lat),
        longitude: parseFloat(this.hospital.lng),
        name: this.hospital.name,
        address: this.hospital.address
      }
      
      // 关闭弹窗
      this.$refs.navigationPopup.close()
      
      // 根据不同类型打开相应的导航
      switch(type) {
        case 'drive':
          uni.openLocation({
            latitude: location.latitude,
            longitude: location.longitude,
            name: location.name,
            address: location.address,
            success: () => {
              console.log('打开驾车导航成功')
            }
          })
          break
        case 'transit':
          uni.openLocation({
            latitude: location.latitude,
            longitude: location.longitude,
            name: location.name,
            address: location.address,
            success: () => {
              console.log('打开公交导航成功')
            }
          })
          break
        case 'walk':
          uni.openLocation({
            latitude: location.latitude,
            longitude: location.longitude,
            name: location.name,
            address: location.address,
            success: () => {
              console.log('打开步行导航成功')
            }
          })
          break
      }
    }
  }
}
</script>

<style>
.container {
  padding-bottom: 120rpx;
  background-color: #f5f6fa;
}

.hospital-image-container {
  width: 100%;
  height: 400rpx;
}

.hospital-image {
  width: 100%;
  height: 100%;
}

.hospital-info-card {
  background-color: #fff;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.hospital-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  color: #666;
}

.info-row .iconfont {
  margin-right: 10rpx;
  color: #3b82f6;
  font-size: 32rpx;
}

.section {
  background-color: #fff;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
  border-left: 6rpx solid #3b82f6;
  padding-left: 16rpx;
}

.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  background-color: #f8fafc;
  border-radius: 12rpx;
  margin: 0 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.stat-value {
  font-size: 28rpx;
  color: #3b82f6;
  font-weight: bold;
  display: block;
}

.navigation-section {
  position: fixed;
  bottom: 40rpx;
  left: 0;
  right: 0;
  padding: 0 30rpx;
}

.navigation-button {
  width: 100%;
  height: 90rpx;
  background-color: #3b82f6;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.3);
}

.navigation-button .iconfont {
  margin-right: 10rpx;
  font-size: 36rpx;
}

/* 导航模态框样式 */
.nav-modal {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
}

.nav-header {
  text-align: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.location-text {
  font-size: 28rpx;
  color: #333;
}

.nav-options {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
}

.nav-option {
  text-align: center;
  padding: 20rpx;
  border-radius: 12rpx;
  transition: background-color 0.2s;
}

.nav-option:active {
  background-color: #f5f5f5;
}

.nav-option .icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
  display: block;
}

.nav-option text {
  font-size: 28rpx;
  color: #333;
}
</style>